<template>
	<a-form v-if="form" id="components-form-demo-normal-login"
		:form="form"
		class="login-form"
		@submit="handleSubmit">
		<!-- vue里哪怕是方法，也不要自己加()，否则有些地方会有问题，即不要写成handleSubmit(..)，，这个比较坑 -->
		<a-form-item>
			<img src="@/assets/img/logo.png" alt="Logo Pic"/>
		</a-form-item>
		<a-form-item>
			<a-input v-decorator="['username',
			{ rules:[{ required: true, message: 'Please input your username!' }] },]"
				placeholder="Username" tabIndex="1" autoFocus>
				<a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)"/>
			</a-input>
		</a-form-item>
		<a-form-item>
			<a-input v-decorator="['password',
			{ rules: [{ required: true, message: 'Please input your Password!' }] },]"
				type="password"
				placeholder="Password" tabIndex="2">
				<a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/>
			</a-input>
		</a-form-item>
		<a-form-item>
			<a-checkbox v-decorator="['remember',
			{valuePropName: 'checked',initialValue: true,},]" class="login-form-remember" tabIndex="3">
				Remember me
			</a-checkbox>
			<a class="login-form-forgot" href="">
				Forgot password
			</a>
			<a-button type="primary" html-type="submit" class="login-form-button">
				Log in
			</a-button>
			Or
			<a href="">
				register now!
			</a>
		</a-form-item>
	</a-form>
</template>

<script>
	import login from './login'

	export default login
</script>

<!-- 注意，这里必须写"./login.css"不能写成"login.css"，否则scoped无效 -->
<style src="./login.css" scoped>
</style>